<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue/vuejs-2.5.16.js"></script>
		<script type="text/javascript" src="js/element/index.js"></script>
		<link rel="stylesheet" type="text/css" href="js/element/index.css" />
		<script type="text/javascript" src="js/axios/axios-0.18.0.js"></script>

		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				padding: 10px;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		</style>
	</head>

	<!-- 1 序号  
2 添加
3 删除
4 修改
5 批量删除 -->

	<body>


		<div id="app">



			<!-- 条件查询的表单开始 -->
			<el-form :inline="true" :model="userCond" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="userCond.username" placeholder="请输入姓名"></el-input>
				</el-form-item>


				<el-form-item label="性别">
					<el-radio-group v-model="userCond.gender">
						<el-radio label="nan">男</el-radio>
						<el-radio label="nv">女</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="城市">
					<el-select v-model="userCond.city" placeholder="选择城市">
						<el-option label="请选择" value=""></el-option>
						<el-option label="石家庄" value="shijiazhuang"></el-option>
						<el-option label="北京" value="beijing"></el-option>
						<el-option label="上海" value="shanghai"></el-option>
						<el-option label="纽约" value="newYork"></el-option>
					</el-select>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="success" @click="chongzhi">重置</el-button>

					<el-button type="warning" @click="showDialog()">添加用户</el-button>
					<el-button type="danger" @click="delBath()">批量删除</el-button>
				</el-form-item>
			</el-form>
			<!-- 条件查询的表单结束 -->


			<!-- 列表展示开始 -->
			<el-table :data="users" style="width: 100%" ref="multipleTable" stripe
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="序号" type="index" :index="xuhao" width="80">
				</el-table-column>
				<el-table-column prop="username" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="gender" label="性别" width="180">
				</el-table-column>
				<el-table-column prop="city" label="城市">
				</el-table-column>
				<el-table-column prop="hobby" label="爱好">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
						<el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" circle>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 列表展示结束 -->


			<!-- 分页开始 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[2,5,10,20,100, 200, 300, 400]" :page-size="size"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<!-- 分页结束 -->


			<!-- 添加dialog开始 -->
			<el-dialog :title="user.id == null ? '新增用户':'修改用户'" :visible.sync="dialogFormVisible"
				:close-on-click-modal="false">
				<el-form :model="user" label-width="80px" :rules="rules" ref="ruleForm">
					
					<el-form-item label="姓名" prop="username">
						<el-input v-model="user.username"></el-input>
					</el-form-item>

					<el-form-item label="靓照">
						<el-upload class="avatar-uploader" action="http://localhost:8081/aaa/file/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="user.picurl" :src="user.picurl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>


					<el-form-item label="性别" prop="gender">
						<el-radio-group v-model="user.gender">
							<el-radio label="nan">男</el-radio>
							<el-radio label="nv">女</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="爱好">
						<el-checkbox-group v-model="user.hobby">
							<el-checkbox label="basketball">篮球</el-checkbox>
							<el-checkbox label="music">音乐</el-checkbox>
							<el-checkbox label="dance">跳舞</el-checkbox>
							<el-checkbox label="football">足球</el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item label="城市">
						<el-select v-model="user.city" placeholder="请选择城市">
							<el-option label="石家庄" value="shijiazhuang"></el-option>
							<el-option label="北京" value="beijing"></el-option>
							<el-option label="上海" value="shanghai"></el-option>
							<el-option label="newYork" value="newYork"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="介绍">
						<el-input type="textarea" v-model="user.introduce"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addUser('ruleForm')">{{user.id == null ? '立即新增':'立即修改'}}</el-button>
						<el-button v-show="user.id == null" @click="chongzhiAdd">重置</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 添加dialog结束 -->
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: "#app",

			data: {
				rules: {
					username: [{
							required: true,
							message: '请输入用户姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					gender:[{
							required: true,
							message: '请选择性别',
							trigger: 'blur'
						}]
				},
				users: [],
				page: 1,
				size: 10,
				total: 0,

				userCond: {},

				dialogFormVisible: false,
				user: {
					picurl: "",
					hobby: []
				},

				ids: [],
				//isModify:false,

				isAdd: true,
			},

			created() {
				this.huoqu();
			},

			methods: {
				xuhao(index) {
					return (this.page - 1) * this.size + index + 1;
				},
				async huoqu() {
					//var result = await axios.get("http://localhost:8081/aaa/user/list");
					var {
						data
					} = await axios.post(`http://localhost:8081/aaa/user/page/${this.page}/${this.size}`, this
						.userCond);
					if (data.code == 2000) {
						this.users = data.data.records;
						this.total = data.data.total;
					}

				},
				handleSizeChange(size) {
					//每页显示条数发生改变触发
					this.size = size;
					this.page = 1;
					this.huoqu();

				},

				handleCurrentChange(current) {
					this.page = current;
					this.huoqu();

				},

				onSubmit() {
					//alert(this.userCond)
					this.huoqu();
				},
				chongzhi() {
					this.userCond = {};
				},
				showDialog() {
					this.chongzhiAdd();
					this.dialogFormVisible = true;
				},

				addUser(formName) {
					//alert("添加")
					//console.log(this.user)
					this.$refs[formName].validate((valid) => {
					          if (valid) {
					            //alert('submit!');
								this.addUserAfterValid();
								
					          } else {
					           
					            return false;
					          }
					        });

					
				},
				
				async addUserAfterValid(){
					var {
						data
					} = await axios.post(`http://localhost:8081/aaa/user`, this.user);
					
					this.dialogFormVisible = false;
					
					if (data.code == 2000) {
						this.page = 1;
						this.huoqu();
					}
				},

				chongzhiAdd() {
					//this.$message('重置');
					this.user = {
						picurl: "",
						hobby: []
					}
				},

				async handleEdit(b) {
					//console.log(a);
					//console.log(b);
					//弹框  查询  回显
					this.showDialog();
					this.isAdd = false;

					var {
						data
					} = await axios.get(`http://localhost:8081/aaa/user/${b.id}`);
					if (data.code == 2000) {
						this.user = data.data;
					}

				},

				handleDelete(b) {
					this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.delUserById(b.id);
					})
				},

				async delUserById(id) {
					var {
						data
					} = await axios.delete(`http://localhost:8081/aaa/user/${id}`);
					if (data.code == 2000) {
						this.huoqu();
					}
				},

				async delBath() {
					//alert("ssssssssssssssssss")
					// 获取所有 选中的元素的id  添加一个数组中,传递个后台
					if (this.ids.length == 0) {
						this.$message("您没有选中任何用户")
					} else {
						var {
							data
						} = await axios.post(`http://localhost:8081/aaa/user/batch`, this.ids);
						if (data.code == 2000) {
							this.huoqu();
						}
					}
				},

				handleSelectionChange() {
					//何时触发 选中元素发生变化触发
					//console.log(Math.random())
					this.ids = [];
					var arr = this.$refs.multipleTable.selection;
					//console.log(arr)
					for (var i = 0; i < arr.length; i++) {
						var user = arr[i];
						this.ids.push(user.id);
					}
				},

				//上传完成回调
				handleAvatarSuccess(resp) {
					//文件上传完成执行
					if (this.user.picurl && this.isAdd) {
						//删除
						//var param ={"fileUrl":this.user.picurl};
						const data = new FormData()
						data.append('fileUrl', this.user.picurl)
						axios.post(`http://localhost:8081/aaa/file/delete`, data);
					}
					this.isAdd = true;
					//console.log("--------------"+resp.data)
					this.user.picurl = resp.data;
				},

				//上传之前执行
				beforeAvatarUpload(file) {
					//开始上传文件之前执行
					const isJPG = file.type === 'image/jpeg';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				}

			}
		})
	</script>
</html>
